<template>
    <div id="list-mescroll" :style="{height: `${height}px`}">
        <div 
        class="list"
        v-for="option in listOptionArr"
        :key="option"
        v-show="option === activeListOpt"
        :id="option"
        >
            <ul class="list-ul">
                <li class="option-li" v-for="(item, index) in listOption[option].list" :key="index">
                    <a @click="clickWorkshopDetail(item)" v-if="option === 'workshop'" class="workshop-list-li-content">
                        <div class="workshop-list-li-top">
                            <div class="workshop-list-li-top-left">
                                <user-head-img 
                                :userImg="item.user.headImg"
                                :height="40"
                                :width="40"
                                :isRound="false"
                                class="workshop-list-li-top-left-img user-img-common"
                                />
                            </div>
                            <div class="workshop-list-li-top-right">
                                <div class="workshop-list-li-top-right-top">
                                    {{item.user.nickName}} 
                                    <user-level-icon 
                                    class="level-icon"
                                    :level="item.user.userLevel" 
                                    :overlayIsShow="showWindow === 'userLevel'" 
                                    @showOverlay="showOverlay"
                                    @toHideOverlay="hideOverlay" />
                                    <contribution-icon 
                                    class="user-tag-contribution user-tag-icon level-icon"
                                    :offer="item.offer" 
                                    :overlayIsShow="showWindow === 'contribution'" 
                                    @showOverlay="showOverlay"
                                    @toHideOverlay="hideOverlay"
                                    @hideOverlay="hideOverlay"
                                    />
                                </div>
                                <div class="workshop-list-li-top-right-bottom">{{item.user.signature}}</div>
                            </div>
                        </div>
                        <div class="workshop-list-li-content-info">
                            <div class="workshop-list-li-left">
                                <div class="workshop-list-li-left-title">{{item.seminarTitle}}</div>
                            </div>
                            <div class="workshop-list-li-right">
                                <div class="workshop-list-li-status" :class="item.statusClass">{{item.statusText}}</div>
                                <div class="workshop-list-li-time workshop-list-li-time-start">{{item.startText}}</div>
                                <div class="workshop-list-li-time workshop-list-li-time-end">{{item.endText}}</div>
                            </div>
                        </div>
                        <div v-if="item.groupNo && item.groupName" class="workshop-list-li-left-other">
                            <image-vant :width="15" height="15" :src="associationMenuSelectIcon"/>
                            {{item.groupName}}
                        </div>
                        <div class="workshop-list-li-left-other">
                            <span class="workshop-list-li-place">{{item.groupName == 1 ? '直属微信群' : '千聊直播'}}</span> | 
                            <span class="workshop-list-visit-count">
                                <image-vant :width="15" height="15" :src="visitMroIcon"/>
                                {{item.viewCount}}
                            </span>
                        </div>
                    </a>
                    <div @click="clickAsDetail(item)" v-if="option === 'association'" class="association-li-one-content">
                        <div class="association-li-one-content-left">
                            <image-vant v-if="item.headImg" :src="item.headImg"/>
                            <div v-else class="association-li-div-left-div">{{item.groupName}}</div>
                            <div v-if="item.prestige == 1" class="prestige-icon-code">荐</div>
                        </div>
                        <div class="association-li-one-content-right">
                            <div class="association-li-one-content-detail">
                                {{item.groupName}}
                            </div>
                        </div>
                    </div>
                    <div @click="clickWechatGroDetail(item)" v-if="option === 'wechat'" class="wechat-list">
                        <div class="content child">
                            <div class="thumb">
                                <div class="wechat-name">{{item.wechatGroupName}}</div>
                            </div>
                            <div class="box-content">
                                <div class="wechat-name-title">{{item.wechatGroupName}}</div>
                                <div class="wechat-introduction">{{item.introductionText}}</div>
                            </div>
                        </div>
                        <div class="other child">
                            <span class="opt">
                                <image-vant class="icon" :src="visitMroIcon" :width="15" :height="15" :isRound="true" />
                                {{item.viewCount}}
                            </span>
                            <span class="opt">
                                <image-vant class="icon" :src="associationIcon" :width="15" :height="15" />
                                {{item.groupName}}
                            </span>
                        </div>
                    </div>
                </li>
            </ul>
            <div :id="`${option}-empty`" class="empty-info"></div>
        </div>
		<van-overlay :show="isShowOverlay" @click="hideOverlay" />
    </div>
</template>

<script>
// 自定义方法
import { getProImg } from "_projectFn/images"
import { getText } from "_commonFn/string"
import { getAsUserIndex, getWorkshopUserIndex, getUserWechatGroList } from "_network/request"
import { enterWorkshopDetail, enterAsDetail, enterWechatGruopDetail, } from "_projectFn/page"
import { checkCacheaIsPageData } from "_projectFn/check"

// 自定义组件
import ImageVant from '_components/project/common/ImageVant'
import UserHeadImg from '_components/project/common/UserHeadImg'
import UserLevelIcon from '_components/project/iconLabel/UserLevelIcon'
import ContributionIcon from '_components/project/iconLabel/Contribution'

// 本地图片
import scrollTop from '_assets/img/mescroll-totop.png'
import emptyContentImg from '_assets/img/empty-content-img.svg'
import associationMenuSelect from '_assets/img/association-menu-select.svg'
import visitMro from '_assets/img/visit-mro-icon.svg'
import associationImg from '_assets/img/association-menu-select.svg'

// 引入mescroll.min.js和mescroll.min.css
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'

// UI组件
import { Overlay } from 'vant'

// Vue
import Vue from 'vue'
Vue.use(Overlay)

export default {
    name: 'UserIndexList',
    props: {
        height: {
            type: Number,
            default: 300
        },
        listOption: {
            type: Object,
            default: {}
        },
        activeListOpt: { // 默认选项
            type: String,
            default: ''
        },
    },
    data() {
        return {
            mescroll: {
                association: null,
                wechat: null,
                workshop: null,
            },
            mesConfig: {
                association: {
                    total: 0,
                },
                wechat: {
                    total: 0,
                },
                workshop: {
                    total: 0,
                },
            },
            mesCacheConfig: {
                association: {},
                wechat: {},
                workshop: {},
            },
            scrollTopIcon: getProImg('mescroll-totop.png', scrollTop),
            emptyContentIcon: getProImg("sex-women-icon.svg", emptyContentImg),
            associationMenuSelectIcon: getProImg("association-menu-select.svg", associationMenuSelect),
            visitMroIcon: getProImg("visit-mro-icon.svg", visitMro),
            isShowOverlay: false,
            showWindow: '',
            associationIcon: getProImg('association-menu-select', associationImg),
        }
    },
    methods: {
        // 设置所有mescroll up配置
        setAllMesConfig(data) {
            // console.log('setAllMesConfig data', data)
            this.mesCacheConfig = data
        },
        clickWorkshopDetail(data) {
            if (process.env.IS_LOCAL == 0) {
                this.cachePageData()
            }
            enterWorkshopDetail({
                seminarNo: data.seminarNo,
                groupNo: data.groupNo,
            })
        },
        clickAsDetail(data) {
            if (process.env.IS_LOCAL == 0) {
                this.cachePageData()
            }
            enterAsDetail({
                asNo: data.no,
                associationType: data.groupType === 'ZH' ? 'exhibition' : '',
            })
        },
        cachePageData() {
            this.$emit('cachePageData')
        },
        getAllMesConfig() {
            const that = this
            const data = {}
            that.listOptionArr.forEach((item, index) => {
                const config = that.mescroll[item].optUp
                data[item] = {}
                data[item].optUp = {
                    page: config.page,
                    isUpLoadContinue: that.listOption[item].list.length < that.mesConfig[item].total && that.mesConfig[item].total > 0,
                    id: item
                }
            })
            return data
        },
        hideOverlay() {
            // console.log('hideOverlay')
            this.isShowOverlay = false
            this.showWindow = ''
        },
        showOverlay(windowName) {
            if (windowName) {
                this.isShowOverlay = true
                this.showWindow = windowName
            }
        },
        // 社群下拉重新加载
		associationDownCallback() {
            const that = this
			this.downCallback({
                callback() {
                    that.mescroll['association'].endErr()
                }
            })
		},
        // 微信群下拉重新加载
		wechatDownCallback() {
            const that = this
			this.downCallback({
                callback() {
                    that.mescroll['wechat'].endErr()
                }
            })
		},
        // 主讲下拉重新加载
		workshopDownCallback() {
            const that = this
			this.downCallback({
                callback() {
                    that.mescroll['workshop'].endErr()
                }
            })
		},
		// 社群上拉加载更多
		associationUpCallback(page) {
            const that = this
            this.upCallback({
                callback() {
                    that.getAsList(page)
                }
            })
        },
		// 微信群上拉加载更多
		wechatUpCallback(page) {
            const that = this
            this.upCallback({
                callback() {
                    that.getWechatList(page)
                }
            })
        },
		// 主讲上拉加载更多
		workshopUpCallback(page) {
            const that = this
            this.upCallback({
                callback() {
                    that.getWorkshopList(page)
                }
            })
        },
        upCallback({callback}) {
            typeof callback === 'function' && callback(true)
        },
        downCallback({callback}) {
            setTimeout(() => {
                typeof callback === 'function' && callback(true)
			}, 300)
        },
        // 判断返回上拉加载函数
        setUpLoadFn(id) {
            switch (id) {
                case 'association':
                    return this.associationUpCallback
                    break;
                case 'workshop':
                    return this.workshopUpCallback
                    break;
                case 'wechat':
                    return this.wechatUpCallback
                    break;
                default:
                    return this.associationUpCallback
                    break;
            }
        },
        // 判断返回下拉加载函数
        setDownLoadFn(id) {
            switch (id) {
                case 'association':
                    return this.associationDownCallback
                    break;
                case 'workshop':
                    return this.workshopDownCallback
                    break;
                case 'wechat':
                    return this.wechatDownCallback
                    break;
                    return this.associationDownCallback
                    break;
            }
        },
        setGetFail({code, id, stiFnName}) {
            // console.log('this.listOption[id].list.length', this.listOption[id].list.length)
            this.mescroll[id].endErr()
            if (this.listOption[id].list.length === 0) {
                this.$emit(stiFnName, {})
                this.mescroll[id].showEmpty()
            }
        },
        setGetSuccess(list, id, total) {
            // console.log('list', list)
            // console.log('id', id)
            // console.log('total', total)
            if (Array.isArray(list) && list.length > 0) {
                this.$emit('setListData', list, id)
            }
            this.mescroll[id].endBySize(list.length, total)
            this.mesConfig[id].total = total
        },
        // 获取微信群列表
        getWechatList(page) {
            getUserWechatGroList({
                userId: this.$route.query.userId,
                page: page.num,
                pageSize: page.size,
            })
			.then(res => {
				console.log("获取个人主页-微信群 res：", res)
				if (res.errcode == 0) {
                    this.$emit('setWechatStatistics', res)
                    this.setGetSuccess(res.data, 'wechat', res.total)
				} else {
                    this.setGetFail({
                        code: res.errcode, 
                        id:'wechat',
                        stiFnName: 'setWechatStatistics'
                    })
				}
			}, res => {
				console.log("fail: res", res)
				this.mescroll['wechat'].endErr()
			})
			.catch(res => {
				console.log("catch：res", res)
				this.mescroll['wechat'].endErr()
            })
        },
        getAsList(page) {
            getAsUserIndex({
                UserId: this.$route.query.userId,
                Page: page.num,
                PageSize: page.size,
                
            }, `getAsUserIndex${page.num}`)
			.then(res => {
				console.log("获取个人主页-社群 res：", res)
				if (res.errcode == 0) {
                    this.$emit('setAsStatistics', res.data)
                    this.setGetSuccess(res.data.ListItem, 'association', res.total)
				} else {
                    this.setGetFail({
                        code: res.errcode, 
                        id:'association',
                        stiFnName: 'setAsStatistics'
                    })
				}
			}, res => {
				console.log("fail: res", res)
				this.mescroll['association'].endErr()
			})
			.catch(res => {
				console.log("catch：res", res)
				this.mescroll['association'].endErr()
            })
        },
        getWorkshopList(page) {
            getWorkshopUserIndex({
                UserId: this.$route.query.userId,
                Page: page.num,
                PageSize: page.size,
            })
			.then(res => {
				console.log("获取个人主页-主讲 res：", res)
				if (res.errcode == 0) {
                    this.$emit('setWorkshopStatistics', res.data)
                    this.setGetSuccess(res.data.ListItem, 'workshop', res.total)
				} else {
                    this.setGetFail({
                        code: res.errcode, 
                        id:'workshop',
                        stiFnName: 'setWorkshopStatistics'
                    })
                    // this.setGetFail(res.errcode, 'workshop', res.total, 'setWorkshopStatistics')
				}
			}, res => {
				console.log("fail: res", res)
				this.mescroll['workshop'].endErr()
			})
			.catch(res => {
				console.log("catch：res", res)
				this.mescroll['workshop'].endErr()
			})
        },
        setMescrollList() {
            const that = this
            checkCacheaIsPageData({
                sessionStorageKey: 'UserIndexListCache',
                pageQueryStr: this.$route.query,
                callback() {
                    setTimeout(() => {
                        console.log('setMescrollList')
                        that.listOptionArr.forEach((item) => {
                            const upCallback = that.setUpLoadFn(item)
                            const downCallback = that.setDownLoadFn(item)
                            const upConfig = that.mesCacheConfig[item].optUp || {
                                page: {
                                    num: 0,
                                    size: 20
                                },
                                isUpLoadContinue: true,
                                id: item
                            }
                            // console.log('upConfig', upConfig)
                            // 在mounted生命周期初始化mescroll,以确保您配置的dom元素能够被找到.
                            if (that.mescroll[item] && that.mescroll[item].destroy) {
                                // console.log('destroy')
                                that.mescroll[item].removeEmpty()
                                that.mescroll[item].destroy()
                            }
                            that.mescroll[item] = new MeScroll(item, {
                                down: {
                                    auto: false, // 是否在初始化完毕之后自动执行下拉回调callback; 默认true
                                    callback: downCallback, // 下拉刷新的回调 
                                },
                                up: {
                                    auto: that.activeListOpt === item && that.listOption[item] && that.listOption[item].list && that.listOption[item].list.length === 0, // 是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
                                    callback: upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
                                    page: {
                                        num: upConfig.page.num, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                                        size: upConfig.page.size // 每页数据的数量
                                    },
                                    noMoreSize: 1, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                                    isLock: !upConfig.isUpLoadContinue,
                                    toTop: { // 配置回到顶部按钮
                                        src: that.scrollTopIcon
                                    },
                                    htmlNodata: '<div class="is-all-data">已显示全部</div>',
                                    warpClass: 'mescroll-upwarp',
                                    empty: {
                                        //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
                                        warpId:	`${item}-empty`, //父布局的id (1.3.5版本支持传入dom元素)
                                        icon: that.emptyContentIcon, //图标,默认null,支持网络图
                                        tip: "没有相关信息内容" //提示
                                    },
                                }
                            })
                            if (upConfig.isUpLoadContinue === false) {
                                if (that.listOption[item].list.length > 0) {
                                    that.mescroll[item].showNoMore()
                                } else {
                                    that.mescroll[item].showEmpty()
                                }
                            }
                        })
                    }, 1)
                }
            })
            // this.listOptionArr.forEach(item => {
            //     const upCallback = that.setUpLoadFn(item)
            //     const downCallback = that.setDownLoadFn(item)
            //     // console.log('that.activeListOpt === item', that.activeListOpt === item)
            //     that.mescroll[item] = new MeScroll(item, {
            //         down: {
            //             auto: false, // 是否在初始化完毕之后自动执行下拉回调callback; 默认true
            //             callback: downCallback, // 下拉刷新的回调 
            //         },
            //         up: {
            //             auto: that.activeListOpt === item, // 是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            //             callback: upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            //             page: {
            //                 num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
            //                 size: 20 // 每页数据的数量
            //             },
            //             noMoreSize: 1, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
            //             isLock: false,
            //             toTop: { // 配置回到顶部按钮
            //                 src: that.scrollTopIcon
            //             },
            //             htmlNodata: '<div class="is-all-data">已显示全部</div>',
            //             warpClass: 'mescroll-upwarp',
            //             empty: {
            //                 //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
            //                 warpId:	`${item}-empty`, //父布局的id (1.3.5版本支持传入dom元素)
            //                 icon: that.emptyContentIcon, //图标,默认null,支持网络图
            //                 tip: "没有相关信息内容" //提示
            //             },
            //         }
            //     })
            // })
        },
        setMounted() {
            this.setMescrollList()
        },
        // 点击进入微信群详情页面
        clickWechatGroDetail(data) {
            enterWechatGruopDetail({
                isOuter: 1,
                wechatGroupNo: data.assNo,
                type: 'list',
            })
        },
    },
    computed: {
        listOptionArr() {
            return Object.keys(this.listOption)
        }
    },
    mounted() {
        // this.setMescrollList()
    },
    activated() {
        this.setMescrollList()
    },
    watch: {
        activeListOpt() {
            if (this.mescroll[this.activeListOpt] && this.listOption[this.activeListOpt].list.length === 0 && this.mescroll[this.activeListOpt].triggerUpScroll && typeof this.mescroll[this.activeListOpt].triggerUpScroll === 'function') {
                this.mescroll[this.activeListOpt].triggerUpScroll()
            }
        }
    },
    components: {
        UserHeadImg,
        ImageVant,
        UserLevelIcon,
        ContributionIcon,
    }
}
</script>

<style lang="scss" scoped>
#list-mescroll {
    overflow-y: scroll;

    .list {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
    }

    .mescroll-upwarp {
        padding: 0;

        .is-all-data {
            height: 60px;
            text-align: center;
            line-height: 60px;
            background: #eeeeee;
            color: #999999;
            font-size: 12px;
        }
    }

    .empty-info {
        img {
            width: 120px !important;
        }
    }
}

.option-li {
    border-bottom: 2px solid #dfdfdf;
    padding: 15px;
    cursor: pointer;
    background: white;
}

// 微信群列表
.wechat-list {
    
    .child {
        &:not(:last-child) {
            margin-bottom: 10px;
        }
    }

    .content {
        width: 100%;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        height: 44px;

        .thumb {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 100%;
            flex-shrink: 0;
            margin-right: 5px;
            position: relative;

            .wechat-name {
                background: #6197fd;
                color: white;
                font-size: 14px;
                height: 100%;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                padding: 7px;
                overflow: hidden;
            }
        }
        
        .box-content {
            width: 100%;
            height: 100%;

            div {
                height: 22px;
                width: 100%;
                line-height: 22px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                box-orient: vertical;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                overflow: hidden;
            }

            .wechat-name-title {
                font-weight: bold;
                color: #333333;
            }

            .wechat-introduction {
                font-size: 12px;
                color: #999999;
            }
        }
    }

    .other {
        // width: 100%;
        // height: 30px;
        // display: flex;
        // align-items: center;
        // font-size: 12px;
        // color: #999999;

        .opt {
            &:not(:last-child) {
                &::after {
                    content: '|';
                    margin: 0 3px;
                }
            }

            .icon {
                position: relative;
                top: 2px;
            }
        }
    }
}
// 微信群列表结束

/* 群LI列表 */
.option-li-div-top {
    display: -webkit-flex;
    display: flex;
    height: 35px;
    width: 100%;
    font-size: 12px;
}

.option-li-div-top-left {
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
}

.option-li-div-top-left-user-info-img-div {
    position: relative;
}

.option-li-div-top-left-user-info-img-div>.option-li-div-top-left-user-info-img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 10px;
}

.option-li-committee-icon {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 6px;
    bottom: -1px;
    border-radius: 50%;
}

.user-info-text-option-li-div {
    width: 100%;
    height: 100%;
}

.user-info-text-option {
    height: 17.5px;
    line-height: 17.5px;
}

.user-info-signature-option {
    color: #999999;
}

.option-li-div-top-right {
    flex-shrink: 0;
    position: relative;
}

.city-name-option-li-icon {
    width: 18px;
    height: 18px;
}

.option-li-tag-text-div {
    color: #999999;
    font-size: 12px;
    line-height: 35px;
    margin-top: 4px;
}

.mro-label-img {
    width: 15px;
    height: 15px;
}

.option-li-content-div {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}

.clue-li-content-div {
    margin-top: 15px;
    margin-bottom: 4px;
}

.option-li-content-text {
    font-size: 16px;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    line-height: 26px;
    width: 100%;
}

.option-li-content-text-span div,.option-li-content-text-span p,.option-li-content-text-span h1,.option-li-content-text-span h2,.option-li-content-text-span h3{
    display: inline;
}

.option-li-content-text-span img,.option-li-content-text-span button,.option-li-content-text-span audio,.option-li-content-text-span video {
    display: none;
}

.option-li-content-img {
    flex-shrink: 0;
    width: 75px;
    height: 75px;
    margin-left: 10px;
    border: 1px solid #eeeeee;
}

.option-li-relevance {
    line-height: 30px;
    font-size: 12px;
    color: #999999;
}

.option-li-other-info {
    line-height: 35px;
    font-size: 12px;
    color: #999999;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
}

.visit-mro-icon {
    position: relative;
    bottom: 1px;
    margin-right: 1px;
}

.issue-time-icon-div {
    position: relative;
    height: 20px;
    line-height: 20px;
    top: 7.5px;
    cursor: pointer;
}

.issue-time-icon {
    font-size: 17px;
    position: relative;
    top: 1px;
}

.issue-time {
    width: 112px;
    height: 30px;
    background: #f6f6f6;
    font-size: 12px;
    position: absolute;
    text-align: center;
    right: 0;
    line-height: 30px;
    border-radius: 5px;
    top: 15px;
}


.workshop-list-li-content-info {
    display: -webkit-flex;
    display: flex;
    height: 60px;
    width: 100%;
    color: #999999;
    font-size: 12px;
    align-items: center;
    margin-top: 10px;
}

.workshop-list-li-left {
    width: 90%;
    height: 100%;
    line-height: 20px;
    margin-right: 10px;
}

.workshop-list-li-right {
    min-width: 78px;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    flex-shrink: 0;
}

.workshop-list-li-status {
    color: white;
    background: #007BBF;
    display: inline-block;
    min-width: 66px;
    height: 24px;
    line-height: 24px;
    border-radius: 20px;
    padding: 0 5px;
}

.workshop-list-li-status-end {
    background: #cccccc;
}

.enter-workshop-status-not-started { 
    background: #0077bf;
}

.enter-workshop-status-quickly-started {
    background: #ee7c30;
}

.enter-workshop-status-ongoing {
    background: #00c702;
}

.enter-workshop-status-ended {
    background: #999999;
}

.workshop-list-li-time {
    height: 16px;
    font-size: 12px;
    color: #333333;
}

.workshop-list-li-time-start {
    margin-top: 4px;
}

.workshop-list-li-left-img {
    flex-shrink: 0;
    height: 60px;
    width: 60px;
}

.workshop-list-li-top {
    height: 40px;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    font-size: 12px;
}
    
.workshop-list-li-top-right {
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #333333;
}

.workshop-committee-icon {
    width: 15px;
    height: 15px;
    position: relative;
    bottom: 1px;
}

.workshop-list-li-top-right-bottom {
    color: #999999;
}
    
.workshop-list-li-top-left {
    width: 40px;
    height: 100%;
    flex-shrink: 0;
    margin-right: 10px;
}

.workshop-list-li-top-left-img {
    width: 100%;
    height: 100%;
}

.workshop-list-li-left-title {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.workshop-list-li-left-other {
    height: 24px;
    line-height: 24px;
    color: #333333;
    cursor: pointer;
}

/* 社群列表 */
.association-li {
    width: 100%;
    min-height: 60px;
    padding: 20px 10px;
    font-size: 12px;
    overflow: hidden;
}

.association-li-one-content,.association-li-exhibition-content {
    height: 100%;
    width: 100%;
    color: #999999;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    flex-wrap: nowrap;
}

.association-li-one-content-left {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border: 1px solid #eeeeee;
    flex-shrink: 0;
    margin-right: 5px;
    position: relative;
}

.association-li-one-content-left>div, .association-li-one-content-left>img {
    width: 100%;
}

.association-li-info-div {
    font-size: 14px;
    margin-top: 6px;
}

.association-li-one-content-detail {
    font-size: 16px;
    line-height: 25px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: #333333;
    font-weight: bold;
}

.association-li-one-content-right {
    width: 95%;
}

.prestige-icon-code {
    width: 56px !important;
    height: 0;
    border-width: 0 19px 19px 19px;
    border-style: none solid solid;
    border-color: transparent transparent red;
    transform: rotate(9deg);
    font-size: 14px;
    color: white;
    text-align: center;
    position: absolute;
    left: -15px;
    top: 4px;
    font-weight: bold;
}

.color-default {
    color: #0077bf;
}

.color-wechat-default {
    color: rgb(0, 200, 0);
}

.association-li-div-left-div {
    background: #007BBF;
    color: white;
    padding: 10px;
    text-align: center;
    height: 100%;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    box-pack: center;
    box-align: center;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    line-height: 22px;
    position: relative;
}

.level-icon {
    position: relative;
    top: 4px;
    &:not(:last-child) {
        margin-right: 3px;
    }
}
</style>